<div data-controller="toggle" data-component-name="<%= self.class.to_s.underscore %>">
  <div class="relative w-full flex justify-between">
    <%= a_button class: 'focus:outline-none',
      color: :primary,
      size: :sm,
      icon: "avo/filter",
      title: t('avo.click_to_reveal_filters'),
      'data-button': 'resource-filters',
      'data-action': 'click->toggle#togglePanel',
      'data-tippy': 'tooltip' do %>
      <%= t 'avo.filters' %>
      <% if @applied_filters.present? %>
        <span class="ml-1">(<%= "#{@applied_filters.count} #{t('avo.applied', count: @applied_filters.count)}" %>)</span>
      <% end %>
    <% end %>
    <div
      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
      data-toggle-target="panel"
      data-transition-enter="transition ease-out duration-100"
      data-transition-enter-start="transform opacity-0 -translate-y-1"
      data-transition-enter-end="transform opacity-100 translate-y-0"
      data-transition-leave="transition ease-in duration-75"
      data-transition-leave-start="transform opacity-100 translate-y-0"
      data-transition-leave-end="transform opacity-0 -translate-y-1"
    >
      <% @filters.each do |filter| %>
        <%= render partial: filter.class.template, locals: {filter: filter} %>
      <% end %>
      <div class="p-4 border-gray-300 border-t">
        <% if @applied_filters.present? %>
          <%= a_link reset_path, data: {turbo_frame: params[:turbo_frame]}, color: :gray, size: :sm, class: 'w-full justify-center' do %>
            <%= t('avo.reset_filters') %>
          <% end %>
        <% else %>
          <%= a_button class: 'w-full justify-center', disabled: true do %>
            <%= t('avo.reset_filters') %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>
